<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style_m.css" />
		<link rel="stylesheet" href="css/title_m.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			body,.mui-content{color:#fff;}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-control-content {
				display: block;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #1a1a1a;
				color:#f90;
			}
			.mui-table-view{background:#1a1a1a;}
			/*头部*/
			
			
			/*左侧边栏的边框色*/
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{border:none;}
			/*左侧边栏字体颜色*/
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:#fff;}
			fieldset{margin-top:30px;margin-left:20%;text-align:center;border:none;border-top:1px solid #272727;width:60%;}
			fieldset legend{padding:0 20px;}
			/*ul上下边距*/
			#segmentedControlContents .mui-table-view:before,.mui-table-view:after{height:0;}
			/*li上下边距*/
			#segmentedControlContents .mui-table-view-cell:before,.mui-table-view-cell:after{height:0;}
			#segmentedControlContents .mui-table-view{display: flex;flex-wrap: wrap;}/*ul下flex样式布局*/
			#segmentedControlContents .mui-table-view-cell{flex:0 0 33.3333%;font-size:12px;padding:11px;}
			#segmentedControlContents .mui-table-view-cell.mui-active{background:none;}
			#segmentedControlContents .mui-table-view-cell img{width:100%;}
			#segmentedControlContents .mui-table-view-cell p{color:#fff;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">全部分类</h1>
		</header>
		<style>
			.mui-bar-nav~.mui-content{padding-top:0;}
			.unshow{display:none;}
			.mui-fullscreen{top:104px;}
			.continent{margin-top:44px;height:60px;width:100%;z-index:9999999;display: flex;align-items:center;justify-content: space-around;flex-direction: row;}
			.continent button{margin-left:10px;margin-right:10px;padding:3px 7px;border:1px solid #ffba00;border-radius:20px;color:#ffba00;background:#1a1a1a;}
			.mui-btn.mui-active:enabled, .mui-btn:enabled:active, button.mui-active:enabled, button:enabled:active, input[type=button].mui-active:enabled, input[type=button]:enabled:active, input[type=reset].mui-active:enabled, input[type=reset]:enabled:active, input[type=submit].mui-active:enabled, input[type=submit]:enabled:active{color:#1a1a1a;background:#ffba00;border;none;}
			.show{display: block;}
		</style>
		<!--全部分类、亚洲、欧洲。。。-->
		<div class="continent mui-button-group" id="continent">
			<button class="mui-btn mui-active">全球</button>
			<button class="mui-btn">亚洲</button>
			<button class="mui-btn">欧洲</button>
			<button class="mui-btn">澳洲</button>
			<button class="mui-btn">美洲</button>
		</div>
		<div class="mui-content mui-row mui-fullscreen show">
			<!--左侧选项卡监听事件开始-->
			<div class="mui-col-xs-3" style="border:solid 1px #272727;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #272727;border-top: 1px solid #272727;">
			</div>
			<!--左侧选项卡监听事件结束-->
		</div>
		<div class="mui-content mui-row mui-fullscreen unshow">
			<!--左侧选项卡监听事件开始-->
			<div class="mui-col-xs-3" style="border:solid 1px #272727;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a class="mui-control-item mui-active" data-index="0" href="#content1">
						新品1
					</a>
					<a class="mui-control-item" data-index="0" href="#content1">
						新品2
					</a>
					<a class="mui-control-item" data-index="0" href="#content1">
						新品3
					</a>
					<a class="mui-control-item" data-index="0" href="#content1">
						新品4
					</a>
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #272727;border-top: 1px solid #272727;">
				<div id="content">
					
				</div>
			</div>
			<!--左侧选项卡监听事件结束-->
		</div>
		<div class="mui-content mui-row mui-fullscreen unshow">
			<!--左侧选项卡监听事件开始-->
			<div class="mui-col-xs-3" style="border:solid 1px #272727;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #272727;border-top: 1px solid #272727;">
			</div>
			<!--左侧选项卡监听事件结束-->
		</div>
		<div class="mui-content mui-row mui-fullscreen unshow">
			<!--左侧选项卡监听事件开始-->
			<div class="mui-col-xs-3" style="border:solid 1px #272727;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #272727;border-top: 1px solid #272727;">
			</div>
			<!--左侧选项卡监听事件结束-->
		</div>
		<div class="mui-content mui-row mui-fullscreen unshow">
			<!--左侧选项卡监听事件开始-->
			123
			<!--<div class="mui-col-xs-3" style="border:solid 1px #272727;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #272727;border-top: 1px solid #272727;">
			</div>-->
			<!--左侧选项卡监听事件结束-->
		</div>
		
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			var i = 1,
				j = 1,
				m = 16, //左侧选项卡数量+1
				n = 21; //每个选项卡列表数量+1
			for (; i < m; i++) {
				html.push('<a class="mui-control-item" data-index="' + (i - 1) + '" href="#content' + i + '">新品' + i + '</a>');
			}
			controls.innerHTML = html.join('');
			html = [];
			for (i = 1; i < m; i++) {
				html.push('<div id="content' + i + '" class="mui-control-content"><fieldset><legend>手机</legend></fieldset><ul class="mui-table-view">');
				for (j = 1; j < n; j++) {
					html.push('<li class="mui-table-view-cell"><img src="images/cbd.jpg" /><p class="mui-ellipsis-2">第' + i + '个选项卡子项-' + j + '</p></li>');
				}
				html.push('</ul></div>');
			}
			contents.innerHTML = html.join('');
			//默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
//			contents.querySelector('.mui-control-content').classList.add('mui-active');
			(function() {
				var controlsElem = document.getElementById("segmentedControls");
				var contentsElem = document.getElementById("segmentedControlContents");
				var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
				var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
				var controlWrapperElem = controlsElem.parentNode;
				var controlWrapperHeight = controlWrapperElem.offsetHeight;
				var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
				var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
				var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
				var controlTops = []; //存储control的scrollTop值
				var contentTops = [0]; //存储content的scrollTop值
				var length = contentListElem.length;
				for (var i = 0; i < length; i++) {
					controlTops.push(controlListElem[i].offsetTop + controlHeight);
				}
				for (var i = 1; i < length; i++) {
					var offsetTop = contentListElem[i].offsetTop;
					if (offsetTop + 100 >= maxScroll) {
						var height = Math.max(offsetTop + 100 - maxScroll, 100);
						var totalHeight = 0;
						var heights = [];
						for (var j = i; j < length; j++) {
							var offsetHeight = contentListElem[j].offsetHeight;
							totalHeight += offsetHeight;
							heights.push(totalHeight);
						}
						for (var m = 0, len = heights.length; m < len; m++) {
							contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
						}
						break;
					} else {
						contentTops.push(parseInt(offsetTop));
					}
				}
				contentsElem.addEventListener('scroll', function() {
					var scrollTop = contentsElem.scrollTop;
					for (var i = 0; i < length; i++) {
						var offsetTop = contentTops[i];
						var offset = Math.abs(offsetTop - scrollTop);
//						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
						if (scrollTop < offsetTop) {
							if (scrollTop >= maxScroll) {
								onScroll(length - 1);
							} else {
								onScroll(i - 1);
							}
							break;
						} else if (offset < 20) {
							onScroll(i);
							break;
						}else if(scrollTop >= maxScroll){
							onScroll(length - 1);
							break;
						}
					}
				});
				var lastIndex = 0;
				//监听content滚动
				var onScroll = function(index) {
					if (lastIndex !== index) {
						lastIndex = index;
						var lastActiveElem = controlsElem.querySelector('.mui-active');
						lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
						var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
						currentElem.classList.add('mui-active');
						//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
						var controlScrollTop = controlWrapperElem.scrollTop;
						if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
							controlWrapperElem.scrollTop = controlMaxScroll;
						} else if (controlScrollTop > controlTops[index] - controlHeight) {
							controlWrapperElem.scrollTop = 0;
						}
					}
				};
				//滚动到指定content
				var scrollTo = function(index) {
					contentsElem.scrollTop = contentTops[index];
				};
				mui(controlsElem).on('tap', '.mui-control-item', function(e) {
					scrollTo(this.getAttribute('data-index'));
					return false;
				});
			})();
		</script>
		<script>
			var buttons = document.getElementById('continent');
			var aButton = buttons.getElementsByTagName('button');
			var muiContent = document.getElementsByClassName('mui-content');
			console.log(muiContent.length);
			//给每一个button都添加点击事件
			for (var i = 0; i < aButton.length; i++) {
			//通过给button自定义属性来解决
			aButton[i].index=i;//每个键存储一下
			aButton[i].onclick = function () {
			//点击事件的实现？？  this就是点击的button
			for (var j = 0; j < aButton.length; j++) {
			aButton[j].className = 'mui-btn';
			muiContent[j].className = 'mui-content mui-row mui-fullscreen unshow';
			}
			//再给应该添加的对象添加className
			this.className = 'mui-btn mui-active';
			muiContent[this.index].className = 'mui-content mui-row mui-fullscreen show';
			};
			}
		</script>
	</body>

</html>